<template>
    <CommonDialog :dialogShow.sync="dialogShow" @makeSure="makeSure" :title="curRow.id ? '修改通知' : '新增通知'">
        <template #content>
            <el-form >
                <el-form-item label="通知标题">
                    <CommonInput v-model="title"></CommonInput>
                </el-form-item>
                <el-form-item label="通知内容">
                    <CommonInput v-model="content" class="textarea" type="textarea"></CommonInput>
                </el-form-item>
                <el-form-item label="通知文件">
                    <el-upload ref="upload" action="#"  multiple
                        :limit="5" :headers="headers" :auto-upload="false" :file-list="fileList"
                        :on-change="handleChange" :on-remove="removeFile" :on-exceed="limitCheck">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">
                            <p>只支持.png / .jpg / .jpeg / .doc / .docx / .txt / .xls / .xlsx文件</p>
                            <p>最多上传5个文件</p>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
        </template>
    </CommonDialog>
</template>

<script>
import axios from 'axios';
export default {
    name: 'ChangNoticeDialog',
    props: {
        changeDialogShow: [Boolean],
        curRow: {
            typeof: Object,
            default: () => { }

        }
    },
    created() {
        console.log(process.env.VUE_APP_BASE_API);
        this.action = process.env.VUE_APP_BASE_API + '/file/upload'
        // const keys = Object.keys(this.noticeForm)
        // keys.forEach(key => {
        //     // if (this.curRow[key]) {
        //     //     this.noticeForm[key] = this.curRow[key];
        //     // } else {
        //     //     this.noticeForm[key] = '';
        //     // }
        // });
        if (this.curRow.id) {
            this.title = this.curRow.title;
            this.content = this.curRow.content;
            this.fileList = this.curRow.fileList;
        }
    },
    data() {
        return {
            action: "",
            headers: {

            },
            fileListRaw:[],
            fileList: [],
            title: '',
            content: '',
        };
    },
    computed: {
        dialogShow: {
            get() {
                return this.changeDialogShow;
            },
            set(v) {
                this.$emit('update:changeDialogShow', v);
            }
        }
    },
    mounted() {

    },

    methods: {
        makeSure() {
            let data = {
                id: this.curRow.id,
                title: this.title,
                content: this.content,
                fileIdList: this.fileList
            }
            if(this.curRow.id){
                data.fileIdList = this.fileList.map(item=>{
                    return {
                        fileId:item
                    }
                })
            }
            console.log(data,'data');
            
            this.$emit('makeSure', data);
        },
        async handleChange(file, fileList) { // 文件数量改变
            this.fileListRaw = fileList
            const isLt2M = (file.size / 1024 / 1024 < 2)
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
                this.fileListRaw.pop()
                return isLt2M
            }
            var param = new FormData()
            this.fileListRaw.forEach((val, index) => {
                param.append('file', val.raw)
            })
            // 拿取其他的信息
            // param.append('id', sessionStorage.getItem('id'))
            const res = await axios(this.action, {
                headers: {
                    'Authorization': localStorage.getItem('token').replaceAll('"', ''),
                    'Content-Type': 'multipart/form-data'
                },
                method: 'post',
                data: param
            })
            console.log(this.action, 'act', this.fileList, this.title);

            if (res.data.code == 200) {
                console.log(res.data.data, 'rr');
                // this.fileList.push(res.data.data.id)
                this.fileList.push(res.data.data.id)
                this.$message.success('上传成功')
            } else {
                this.$message.error('上传失败')
            }

        },
        // 文件超出个数限制时的钩子
        limitCheck() {
            this.$message.warning('每次上传限制最多五个文件')
        },
        // 文件删除的钩子
        removeFile(file, fileList) {
            this.fileList = fileList
        },
        // 点击确定按钮 上传文件
        confirm() {
            var param = new FormData()
            this.fileList.forEach((val, index) => {
                param.append('file', val.raw)
            })
            // 拿取其他的信息
            param.append('id', sessionStorage.getItem('id'))
            axios(`url......`, {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token'),
                    'Content-Type': 'multipart/form-data'
                },
                method: 'post',
                data: param
            }).then((res) => {
                console.log(res, 'rr');

                if (res.data.code === 200) {

                    this.$message.success('上传成功')
                } else {
                    this.$message.error('上传失败')
                }
            })
        }
    }
};
</script>
<style lang="less" scoped>
::v-deep {
    .el-form-item {
        display: flex;

        .el-form-item__content {
            flex: 1;
        }

        .textarea {
            width: 100%;
        }
    }
}
</style>